<template>
	<view class="system-msg-content bg-white">
		<navigator :url="`/pages/life-circle/group-detail/index?oid=${groupData.item_id||groupData.id}`" hover-class="none" v-if="openId">
			<view class="header flex-x-start">
				<image :src="groupData.portrait" class="avatar"></image>
				<view class="info">
					<text class="name block">{{groupData.name}}</text>
					<text class="description gray">{{groupData.autograph ? groupData.autograph : ''}}</text>
				</view>
			</view>
			<view class="body relative">
				<image class="cover w100 h100" v-if="host && groupData.img[0]" :src="`${host}${groupData.img[0]}${ext}`" mode="aspectFill"></image>
				<view class="detail-info">
					<text class="group-name bold u-line-1">{{groupData.title}}</text>
					<view class="group-member-number">
						<text class="iconfontPT iconhaoyou"></text>
						<text>{{groupData.partake}}</text>
						<view class="right inline-block">
							<text>/</text>
							<text>{{groupData.total}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="location-wrap flex-x-between">
					<view class="left">
						<text class="iconfontPT icondingwei2 location-icon"></text>
						<text class="location u-line-1">{{groupData.address}}</text>
					</view>
					<view class="right">
						{{parseFloat(groupData.distance / 1000, 1).toFixed(1)}}km
					</view>
				</view>
				<view class="activity-start-date-wrap">
					<text class="iconfontPT iconhuodongshijian activity-start-date-icon"></text>
					<text>{{groupData.s_time}}</text>
					<text>——</text>
					<text>{{groupData.e_time}}</text>
				</view>
				<view class="confirm-btn flex-x-between">
					<view class="btn online-number-btn text-center" v-if="!isRecommend">
						<text class="online-number">{{groupData.partake}}</text>
						人正在热聊
					</view>
					<view class="btn online-number-btn text-center" @click.stop="handleJoin" v-if="isRecommend&&state==='awaitBegin'">
						进入群聊
					</view>
					<view class="btn join-btn text-center" @click.stop="handleRecommend" v-if="isRecommend&&state==='awaitBegin'">
						平台推荐
					</view>
					<view class="btn prohibit text-center" v-if="isRecommend&&state==='begined'">
						已开始
					</view>
					<view class="btn prohibit text-center" v-if="isRecommend&&state==='overdue'">
						已过期
					</view>
					<view class="btn join-btn text-center" @click.stop="handleJoin" v-if="isRecommend&&state==='begined'">
						进入群聊
					</view>
					<view class="btn join-btn text-center" @click.stop="handleJoin" v-if="!isRecommend">
						立即加入
					</view>
				</view>
			</view>
		</navigator>
		
		<navigator hover-class="none" url="/pages/authorize" v-else>
			<view class="header flex-x-start">
				<image :src="groupData.portrait" class="avatar"></image>
				<view class="info">
					<text class="name block">{{groupData.name}}</text>
					<text class="description gray">{{groupData.autograph ? groupData.autograph : ''}}</text>
				</view>
			</view>
			<view class="body relative">
				<image class="cover w100 h100" v-if="host" :src="`${host}${groupData.img[0]}${ext}`" mode="aspectFill"></image>
				<view class="detail-info">
					<text class="group-name bold u-line-1">{{groupData.title}}</text>
					<view class="group-member-number">
						<text class="iconfontPT iconhaoyou"></text>
						<text>{{groupData.partake}}</text>
						<view class="right inline-block">
							<text>/</text>
							<text>{{groupData.total}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="location-wrap flex-x-between">
					<view class="left">
						<text class="iconfontPT icondingwei2 location-icon"></text>
						<text class="location">{{groupData.address}}</text>
					</view>
					<view class="right">
						{{parseFloat(groupData.distance / 1000, 1).toFixed(1)}}km
					</view>
				</view>
				<view class="activity-start-date-wrap">
					<text class="iconfontPT iconhuodongshijian activity-start-date-icon"></text>
					<text>{{groupData.s_time}}</text>
					<text>——</text>
					<text>{{groupData.e_time}}</text>
				</view>
				<view class="confirm-btn flex-x-between">
					<view class="btn online-number-btn text-center" v-if="!isRecommend">
						<text class="online-number">{{groupData.partake}}</text>
						人正在热聊
					</view>
					<view class="btn online-number-btn text-center" v-if="isRecommend&&state==='awaitBegin'">
						进入群聊
					</view>
					<view class="btn join-btn text-center"  v-if="isRecommend&&state==='awaitBegin'">
						平台推荐
					</view>
					<view class="btn prohibit text-center" v-if="isRecommend&&state==='begined'">
						已开始
					</view>
					<view class="btn prohibit text-center" v-if="isRecommend&&state==='overdue'">
						已过期
					</view>
					<view class="btn join-btn text-center"  v-if="isRecommend&&state==='begined'">
						进入群聊
					</view>
					<view class="btn join-btn text-center" v-if="!isRecommend">
						立即加入
					</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import {joinGroup} from "../../../apis/life-circle/index.js"
	export default {
		data() {
			return {
				currentGroupMemberNumber: 0,
			}
		},
		props: ['groupData', 'isRecommend', 'state', 'customHost'],
		computed: {
			host() {
				return this.customHost ? this.customHost : this.$baseHost.car;
			},
			ext() {
				return this.customHost ? '-t.m90xx' : '';
			},
			isJoined() {
				return this.groupList.find(group => group.groupID === this.groupData.GroupId)
			},
			...mapGetters(["lifeCircleCurrentTabbar", "groupList",'openId'])
		},
		methods: {
			handleRelaunch() {
				uni.navigateTo({
					url: `/pages/life-circle/add-group/index?groupTypeName=${item.title}&groupTypeId=${item.id}`
				})
			},
			async handleJoin() {
				const params = {
					url: '/pages/life-circle/chat-box/index',
					conversationID: `GROUP${this.groupData.GroupId}`,
					oid:this.groupData.item_id||this.groupData.id
				}
				if(this.isJoined){
					this.$store.dispatch('tim/checkoutConversation', params)
				}else{
					try{
						this.$loading.show()
						const {code,data,info} = await joinGroup({oid:this.groupData.id})
						if(code === 200){
							const res = await uni.$Tim.joinGroup({groupID:this.groupData.GroupId,applyMessage:'申请加入本群！'})
							if(res.code === 0){
								const {code,data} = await uni.$Tim.getGroupList() // main.js UPDATE_GROUP_LIST 回调可能不执行，主动更新列表
								console.log('groupList',data.groupList)
								this.$store.commit('tim/UPDATE_GROUP_LIST', data.groupList)
								this.$store.dispatch('tim/checkoutConversation', params)
							}else{
								console.error('错误：',res.data)
							}
						}else{
							uni.showModal({ title:'提示',content:info,showCancel:false})
						}	
					}catch(e){
						uni.showModal({ title:'提示',content:e.message,showCancel:false})
					}finally{
						this.$loading.hide()
					}
				}
			},
			handleRecommend() {
				uni.navigateTo({
					url: `/pages/personal/add-recommend/index?id=${this.groupData.id}`
				})
			}
		}
	}
</script>

<style lang="less">
	.system-msg-content {
		box-sizing: border-box;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 35rpx;
		// box-shadow: 0rpx 8rpx 29rpx 3rpx rgba(228, 24, 5, 0.15);

		.header {
			font-size: 24rpx;
			margin-bottom: 20rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
				margin-right: 20rpx;
			}

			.info {
				.name {
					font-size: 30rpx;
				}
			}
		}

		.body {
			height: 400rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.cover {}

			.detail-info {
				position: absolute;
				bottom: 0;
				width: 100%;
				color: #ffffff;
				padding: 30rpx;
				box-sizing: border-box;
				background: linear-gradient(0deg, rgba(51, 51, 51, 1) 0%, rgba(255, 255, 255, 0) 100%);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.group-name {
					font-size: 38rpx;
					padding-right: 30rpx;
				}

				.group-member-number {
					font-size: 30rpx;
					.iconfontPT {
						font-size: 26rpx;
						color: #FD830E;
						margin-right: 8rpx;
					}

					.right {
						font-size: 25rpx;
						color: #CCCCCC;
					}
				}
			}
		}

		.footer {
			font-size: 24rpx;

			.iconfontPT {
				font-size: 24rpx;
			}

			.location-wrap {
				margin-top: 20rpx;
				line-height: 28rpx;

				.left {
					display: flex;
					width: 550rpx;
					.location-icon {
						margin-right: 10rpx;
					}
					.location {}
				}
			}

			.activity-start-date-wrap {
				height: 28rpx;
				line-height: 28rpx;
				margin-top: 20rpx;

				.activity-start-date-icon {
					margin-right: 10rpx;
				}
			}

			.confirm-btn {
				margin-top: 30rpx;

				.btn {
					width: 298rpx;
					height: 58rpx;
					line-height: 58rpx;
					border-radius: 30rpx;
					font-size: 24rpx;

					&.online-number-btn {
						border: 1rpx solid rgba(253, 131, 14, 1);
						background: rgba(255, 255, 255, 1);

						.online-number {
							font-size: 30rpx;
							color: #FD830E;
						}
					}

					&.prohibit {
						background: #f8f8f8;
						border-color: #f8f8f8;
						color: #999999;
					}

					&.join-btn {
						border: 1rpx solid rgba(228, 24, 5, 1);
						background: rgba(228, 24, 5, 1);
						color: #ffffff;
					}
				}
			}
		}
	}
</style>
